<template>
	<view>
		<!-- 分隔线 -->
		<!-- <view class="address_line"></view> -->
		<view class="address">
			<view class="item">
				<view class="left">收件人姓名</view>
				<input type="text" placeholder-class="line" placeholder="请输入收货人真实姓名" v-model="name" />
			</view>
			<view class="item">
				<view class="left">联系电话</view>
				<input type="text" placeholder-class="line" placeholder="请输入收货人联系电话" v-model="mobile" />
			</view>
			<view class="item">
				<view class="left">所在地区</view>
				<pickRegions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
					<input disabled type="text" placeholder-class="line" placeholder="请选择所在区域" v-model="region">
				</pickRegions>
				</input>
			</view>
			<view class=" addressinfo">
				<view class="addressinfo_left">详细地址</view>
				<textarea type="text" placeholder-class="line" placeholder="如道路、门牌号、小区、楼栋号、单元室等" v-model="address" />
			</view>
			
		</view>
		<view class="addres_defult">
			<view>设置为默认地址</view>
			<view class="addres_swi">
				<switch  class="add_switech"  @change="switchChange1()" color="#FF4891" style="transform:scale(0.7)" :checked="switchChecked"></switch>
				<switch class="add_switech"  @change="switchChange2()" color="#FF4891" style="transform:scale(0.7)" :checked="!switchChecked"></switch>
			</view>
		</view>
		<view class="bot_btn">
		<view @click="saveaddress" class="btn">保存地址</view>
		</view>
	</view>

</template>

<script>
	import {
		addressadd,
		addresseinfo,
		addressedit
	} from '@/api/mine.js'
	import pickRegions from '../../../pages/Mine/address/city/pick-regions.vue'

	export default {
		components: {
			pickRegions
		},
		onLoad(type) {
			console.log(type)
			this.type = type.type
			this.id = type.id
			console.log('type', this.type)
			if (this.type == 1) {
				uni.setNavigationBarTitle({
					title: '编辑地址'
				})
				this.getaddinfo()
			}
		},
		data() {
			return {
				switchChecked:false,
				region: '', //选择的地址
				name: '',
				mobile: '',
				address: '',
				is_default: '',
				tag: '',
				type: 0, //0是添加地址，1是编辑更新地址
				id: '', //编辑地址id
				tags: [{
					name: '家'
				}, {
					name: '公司'
				}, {
					name: '学校'
				}]
			};
		},
		methods: {
			switchChange1(e) {
				console.log(e)
				 this.switchChecked = !this.switchChecked; 
			},
			switchChange2(e) {
				console.log(e)
				 this.switchChecked = !this.switchChecked;  
			
			},
			// 设置标签
			settag(value) {
				console.log(value)
				if (value == '家') {
					this.tag = 0
				}
				if (value == '公司') {
					this.tag = 1
				}
				if (value == '学校') {
					this.tag = 2
				}
			},
			// 获取编辑地址详情
			getaddinfo() {
				let that = this
				addresseinfo({
					id: that.id
				}).then(res => {
					let list = res.data
					console.log(list)
					that.region = list.region
					that.name = list.name
					that.mobile = list.mobile
					that.address = list.address
					that.is_default = list.is_default
					that.tag = list.tag
					// console.log(that.region,that.name)
				})
			},
			// 获取选择的地区
			handleGetRegion(region) {
				this.region = region.map(item => item.name).join(' ')
			},
			// 设置默认地址
			setDefault() {
				this.is_default = 1
			},
			saveaddress() {
				if (this.type == 1) {
					addressedit({
						id: this.id,
						name: this.name,
						mobile: this.mobile,
						address: this.address,
						doorplate: this.doorplate,
						is_default: this.is_default,
						tag: this.tag,
						region: this.region,
					}).then(res => {
						console.log(res)
						uni.showToast({
							title: '保存成功',
							duration: 2000,
						})
						uni.navigateTo({
							url: '/pages/Mine/address/index'
						})
					})
				} else {
					addressadd({
						name: this.name,
						mobile: this.mobile,
						address: this.address,
						doorplate: this.doorplate,
						is_default: this.is_default,
						tag: this.tag,
						region: this.region,
					}).then(res => {
						console.log(res)
						uni.showToast({
							title: '保存成功',
							duration: 2000,
						})
						uni.navigateTo({
							url: '/pages/Mine/address/index'
						})
					})
				}

			}
		}
	};
</script>

<style lang="scss" scoped>
	page{
		background-color: #F7F8F9;
	}
	.address {
		color: #FFF;
		// position: relative;
		background-color: #FFF;
		border-radius: 15rpx;
		padding: 10rpx ;
		margin: 20rpx 0; 
		height: 440rpx;
	}

	.address_line {
		margin-top: 20rpx;
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}

	.item {
		color: #333;
		display: flex;
		font-size: 30rpx;
		line-height: 100rpx;
		align-items: center;
		border-bottom: solid 1rpx #e4e7ed;
		padding: 0 20rpx;

		.left {
			width: 180rpx;
			font-weight: bold;			
		}

		input {
			text-align: left;
		}
	}

	.addressinfo {
		color: #333;
		display: flex;
		font-size: 30rpx;
		line-height: 100rpx;
		align-items: center;
		padding: 20rpx 20rpx;
		.addressinfo_left{
			width: 180rpx;
				font-weight: bold;			
			}
		textarea {
			// width: 100%;
			height: 80rpx;
			// background-color: #f7f7f7;
			line-height: 60rpx;
			// margin: 40rpx auto;
			// padding: 20rpx;
		}
	}
	.line{
		font-size: 28rpx;
		color: #A9ADB6;
		padding: 10rpx;
	}
	.addres_defult{
		margin-top: 10rpx;
		background-color: #FFF;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		color: #333;
		font-size: 30rpx;
		font-weight: bold;
	}
	.bot_btn{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 95%;
		bottom: 30rpx;
		z-index: 999;
		padding: 20rpx;
	}
	.btn{
		margin-top: 10rpx;
		width: 98%;
		height: 90rpx;
		background: linear-gradient(135deg, #FF78AE 0%, #FF4891 100%);
		display: block;
		float: right;
		border-radius: 50rpx;
		align-items: center;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
		font-size: 35rpx;
	}	
// 	.add_switech{
// 		width: 70rpx !important;
// 		height: 40rpx !important;
// 		background: #97c9c6 !important;
// 		border: 0rpx solid #97c9c6 !important;
// 	}
// .addres_swi{
// 	width: 100;
// 	display: flex;
// 	justify-content: space-between;
// 	align-items: center;
// }
</style>
